<script setup lang="ts">
import { ref } from 'vue'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const imgList = ref<string[]>([
    'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
    'https://gitcode.net/qq_44112897/images/-/raw/master/comic/40.jpg',
    'https://gitcode.net/qq_44112897/images/-/raw/master/comic/15.jpg'
]);
const InderSname = ref([
    {
        id: 1,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/15.jpg',
        name: "用户昵称",
        ip: '贵州',
        times: "一天前",
        tang1: "#tag1 #tag2",
        tang1_s: "11111111111",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 100,
        title1_s: 50,
        title2_s: 90,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

        ]

    },
    {
        id: 2,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
        name: "用户1",
        ip: '贵州',
        times: "一小时前",
        tang1: "#tag1 #tag2",
        tang1_s: "22222222222222",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 120,
        title1_s: 60,
        title2_s: 80,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',

        ]
    },
    {
        id: 3,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
        name: "用户2",
        ip: '北京',
        times: "三天前",
        tang1: "#tag1 #tag2",
        tang1_s: "333333333",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 130,
        title1_s: 70,
        title2_s: 40,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',

        ]
    },
    {
        id: 4,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
        name: "用户3",
        ip: '上海',
        times: "两天前",
        tang1: "#tag1 #tag2",
        tang1_s: "4444444444",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 90,
        title1_s: 100,
        title2_s: 500,
        images: [

            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',

        ]
    },
    {
        id: 5,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
        name: "用户4",
        ip: '四川',
        times: "一天前",
        tang1: "#tag1 #tag2",
        tang1_s: "11111111111",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 40,
        title1_s: 50,
        title2_s: 90,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',

        ]

    },
    {
        id: 6,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/17.jpg',
        name: "用户5",
        ip: '广西',
        times: "一小时前",
        tang1: "#tag1 #tag2",
        tang1_s: "22222222222222",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 170,
        title1_s: 60,
        title2_s: 80,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',


        ]
    },
    {
        id: 7,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
        name: "用户6",
        ip: '江苏',
        times: "五天前",
        tang1: "#tag1 #tag2",
        tang1_s: "333333333",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 130,
        title1_s: 70,
        title2_s: 40,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',


        ]
    },
    {
        id: 8,
        imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
        name: "用户7",
        ip: '上海',
        times: "两天前",
        tang1: "#tag1 #tag2",
        tang1_s: "4444444444",
        imageURL: ["/static/images/share-2.png",
            "/static/images/com_icon_message_pressed_3.png",
            "/static/images/thumbs-up.png",
            "/static/images/star.png"
        ],
        fen_s: "分享",
        title_s: 90,
        title1_s: 100,
        title2_s: 500,
        images: [
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
            'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',


        ]
    },

])

const navIndex1 = ref(0)
const checkIndex1 = (index: number) => {
    navIndex1.value = index
}
const tuiIndex = ref(0)
const chetuiIndex = (index: number) => {
    tuiIndex.value = index
    console.log(tuiIndex.value);
}
</script>

<template>
    <!-- <scroll-view scroll-y class="view-box">

    </scroll-view> -->
    <view class="boxmid">
        <view class="head-nav1">
            <view :class="navIndex1 == 0 ? 'activite1' : ''" @click="checkIndex1(0)">热门话题</view>
            <view :class="navIndex1 == 1 ? 'activite1' : ''" @click="checkIndex1(1)">热门圈子</view>
        </view>
        <view class="content11" v-if="navIndex1 == 0">
            <view class="con-box1">
                <view class="transan"></view>
                <view class="transi"> 热门话题内容</view>
            </view>
        </view>
        <view class="content22" v-if="navIndex1 == 1">
            <view class="con-box2">
                <view class="transan2"></view>
                <view class="transi2"> 热门话题内容</view>
            </view>
        </view>
    </view>
    <view class="xia-box">
        <view class="tui-box">
            <view :class="tuiIndex == 0 ? 'tuiIndex' : ''" @click="chetuiIndex(0)">推荐</view>
            <view :class="tuiIndex == 1 ? 'tuiIndex' : ''" @click="chetuiIndex(1)">新发</view>
            <view :class="tuiIndex == 2 ? 'tuiIndex' : ''" @click="chetuiIndex(2)">#成功上岸</view>
            <view :class="tuiIndex == 3 ? 'tuiIndex' : ''" @click="chetuiIndex(3)">#求助问答</view>
        </view>
        <view class="tui-box1" v-if="tuiIndex == 0">
            <view class="" v-for="(it, index) in InderSname" :key="index">
                <view class="content1">
                    <view class="hav1">
                        <navigator url="/pages/namelist/namelist" open-type="navigate" hover-class="navigator-hover"
                            class="img-path">
                            <view class="imag">
                                <image :src="it.imageurl" mode="scaleToFill" class="image1" />
                            </view>
                            <view class="hu">
                                <text class="name">{{ it.name }}</text>
                                <view class="it">
                                    {{ it.times }}&nbsp;.{{ it.ip }}
                                </view>
                            </view>
                        </navigator>
                        <view class="cz">
                            <view class="button">关注</view>
                        </view>
                    </view>
                    <view class="tag">
                        <text class="tag1">{{ it.tang1 }}</text>
                        <text class="tag2">{{ it.tang1_s }}</text>
                    </view>

                    <view class="ims">
                        <view v-for="(image, index) in it.images " :key="index">
                            <image :src="image" mode="scaleToFill" class="ims2" />
                        </view>
                    </view>
                    <view class="fen"></view>
                    <view class="ove">
                        <view class="ove1">
                            <image :src="it.imageURL[0]" mode="scaleToFill" class="ove3" />
                            <view class="ove4">{{ it.fen_s }}</view>
                            <image :src="it.imageURL[1]" mode="scaleToFill" class="ove3" />
                            <view class="ove4">{{ it.title_s }}</view>
                            <image :src="it.imageURL[2]" mode="scaleToFill" class="ove3" />
                            <view class="ove4">{{ it.title1_s }}</view>
                            <image :src="it.imageURL[3]" mode="scaleToFill" class="ove3" />
                            <view class="ove4">{{ it.title2_s }}</view>
                        </view>
                        <view class="over">
                            <image src="/static/images/icon_more-vertical_default.png" mode="scaleToFill"
                                class="over1" />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="content11" v-if="tuiIndex == 1">
            <view class="con-box1">
                <view class="transan"></view>
                <view class="transi"> </view>
            </view>
        </view>
        <view class="content11" v-if="tuiIndex == 2">
            <view class="con-box1">
                <view class="transan"></view>
                <view class="transi"></view>
            </view>
        </view>
        <view class="content11" v-if="tuiIndex == 3">
            <view class="con-box1">
                <view class="transan"></view>
                <view class="transi"></view>
            </view>
        </view>
    </view>

</template>

<style lang="scss">
.view-box {
    display: flex;
    width: 100%;
    height: 100%;
    background: #ffffff;
    flex-direction: column;
}
.boxmid {
    display: flex;
    flex-direction: column;
    margin-left: 64rpx;
    height: 350rpx;
    width: 628rpx;
    background: #f8d770;
    border-radius: 20rpx;

    .content11 {
        display: flex;
        height: 240rpx;
        margin-left: 40rpx;
        width: 548rpx;

        .transan {
            display: flex;
            position: absolute;
            margin-left: 60rpx;
            width: 0;
            height: 0;
            border-bottom: 25rpx solid rgb(252, 252, 252);
            border-left: 15rpx solid transparent;
            border-right: 15rpx solid transparent;
        }

        .transi {
            display: flex;
            margin-top: 22rpx;
            height: 250rpx;
            width: 548rpx;
            background: #fff;
            border-radius: 40rpx;

        }

        .transi::after {
            display: flex;
            margin-left: 60rpx;
            width: 0;
            height: 0;
            border-bottom: 30rpx solid rgb(252, 252, 252);
            border-left: 15rpx solid transparent;
            /* 左边透明 */
            border-right: 15rpx solid transparent;
        }
    }

    .content22 {
        display: flex;
        height: 240rpx;
        margin-left: 40rpx;
        width: 548rpx;

        .transan2 {
            display: flex;
            position: absolute;
            margin-left: 235rpx;
            width: 0;
            height: 0;
            border-bottom: 25rpx solid rgb(252, 252, 252);
            border-left: 15rpx solid transparent;
            border-right: 15rpx solid transparent;
        }

        .transi2 {
            display: flex;
            margin-top: 22rpx;
            height: 250rpx;
            width: 548rpx;
            background: #fff;
            border-radius: 40rpx;

        }

        .transi2::after {
            display: flex;
            margin-left: 60rpx;
            width: 0;
            height: 0;
            border-bottom: 30rpx solid rgb(252, 252, 252);
            border-left: 15rpx solid transparent;
            /* 左边透明 */
            border-right: 15rpx solid transparent;
        }
    }

    .head-nav1 {
        margin-top: 20rpx;
        margin-right: 280rpx;
        margin-left: 50rpx;
        height: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: LEFT;
        color: #545050;
        line-height: 38rpx;

    }

    .activite1 {
        display: flex;
        color: #000000;

    }

    .head-nav1>view {
        padding-bottom: 10rpx;

    }
}
// 下半部分
.xia-box {
    display: flex;
    margin-top: 44rpx;
    width: 750rpx;
    // height: 3000rpx;
    height: 100%;
    background: #f0f0f0;
    flex-direction: column;

    .tui-box {
        display: flex;
        height: 44rpx;
        margin-top: 20rpx;
        // background: #e8e9af;
        margin-top: 20rpx;
        margin-right: 150rpx;
        margin-left: 65rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: LEFT;
        color: #545050;
        line-height: 38rpx;
    }

    .tuiIndex {
        display: flex;
        color: #000000;
        font-weight: 600;
        font-size: 36rpx;
    }

    .tui-box1 {
        display: flex;
        height: 100%;
        margin: 0 64rpx;
        background: #f8d770;
        flex-direction: column;
    }

    //盒子内容编辑
    .content1 {
        display: flex;
        margin-top: 20rpx;
        background: #ffffff;
        margin-bottom: 20rpx;
        width: auto;
        height: 472rpx;
        border-radius: 20rpx;
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
        flex-direction: column;

        .hav1 {
            display: flex;
            margin-top: 48rpx;
            width: 100%;
            height: 76rpx;

            .img-path {
                display: flex;
            }

            .imag {
                display: flex;
                margin-left: 56rpx;
                width: 76rpx;
                height: 76rpx;

                .image1 {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    /* 保持图片比例并填充整个区域 */
                    border-radius: 50%;
                    /* 让图片呈现圆形 */
                }
            }

            .hu {
                display: flex;
                margin-top: 3rpx;
                width: 144rpx;
                height: 100%;
                flex-direction: column;

                .name {
                    display: flex;
                    width: 130rpx;
                    height: 30rpx;
                    justify-content: center;
                    align-items: center;
                    font-size: 24rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 500;
                    text-align: CENTER;
                    color: #000000;
                    line-height: 28rpx;
                    text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
                }
            }

            .it {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 142rpx;
                height: 30rpx;
                font-size: 20rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                color: #c0bfbf;
                text-align: CENTER;
                line-height: 24rpx;
                text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
            }

            .cz {
                display: flex;
                margin-left: 200rpx;
                width: 100rpx;
                height: 40rpx;
                justify-content: center;
                background: #f2bb16;
                border-radius: 20rpx;
                box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

                .button {
                    display: flex;
                    margin-top: 3rpx;
                    margin-bottom: 4rpx;
                    width: 80rpx;
                    height: 36rpx;
                    justify-content: center;
                    align-items: center;
                    font-size: 24rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 500;
                    text-align: CENTER;
                    color: #ffffff;
                    line-height: 28rpx;
                }

            }
        }

        .tag {
            display: flex;
            flex-direction: row;
            margin-left: 58rpx;
            margin-top: 32rpx;
            width: 384rpx;
            height: 38rpx;

            .tag1 {
                display: flex;
                width: 180rpx;
                height: 38rpx;
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: center;
                color: #f2bb16;
                line-height: 28rpx;
                text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

            }

            .tag2 {
                display: flex;
                width: 204rpx;
                height: 38rpx;
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: center;
                color: #000000;
                line-height: 28rpx;
                text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
            }

        }

        .ims {
            display: flex;
            margin-top: 20rpx;
            margin: 0 66rpx;
            height: 120rpx;

            .ims2 {
                display: flex;
                width: 132rpx;
                height: 120rpx;
                margin-right: 51rpx;
                background: #ffffff;
                border-radius: 20rpx;
                box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25), 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
            }


        }

        .fen {
            display: flex;
            width: 180rpx;
            height: 36rpx;
            margin-top: 26rpx;
            margin-left: 66rpx;
            background: #d9d9d9;
            border-radius: 30rpx;
            box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
        }

        .ove {
            display: flex;
            margin-left: 58rpx;
            margin-top: 20rpx;
            flex-direction: row;
            width: 528rpx;
            height: 48rpx;

            .ove1 {
                display: flex;
                width: 430rpx;
                height: 48rpx;

                .ove2 {
                    display: flex;
                    width: 110rpx;
                    height: 48rpx;

                    &:last-child {
                        margin-right: 0;
                    }
                }

                .ove3 {
                    display: flex;
                    width: 48rpx;
                    height: 48rpx;
                }

                .ove4 {
                    display: flex;
                    width: 60rpx;
                    height: 48rpx;
                    justify-content: center;
                    align-items: center;
                    font-size: 24rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 500;
                    text-align: CENTER;
                    color: #545050;
                    line-height: 28rpx;
                    text-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

                }

            }

            .over {
                display: flex;
                width: 148rpx;
                height: 48rpx;
                justify-content: center;
                /* 水平居中 */
                align-items: center;
                /* 垂直居中 */

                .over1 {
                    display: flex;
                    width: 32rpx;
                    height: 32rpx;
                    margin-left: 30rpx;
                }
            }
        }
    }

}
</style>
